<template>
    <div>
        <el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">基础信息</div>
            <el-form ref="formRef" class="ls-form" :model="formData" :rules="rules" label-width="110px">
                <el-form-item label="业务名称" prop="business_name">
					<div class="w-80">
						<el-input
							v-model="formData.business_name"
							placeholder="请输入业务名称"
							type="text"
							maxlength="30"
							show-word-limit
							clearable
						/>
					</div>
				</el-form-item>
                <el-form-item label="放款额度" prop="quota">
					<div class="w-80">
						<el-input
							v-model="formData.quota"
							placeholder="请输入放款额度"
							type="text"
							maxlength="30"
							show-word-limit
							clearable
						>
                            <template #append>元</template>
                        </el-input>
					</div>
				</el-form-item>
                <el-form-item label="服务费" prop="server_price">
					<div class="w-80">
						<el-input
							v-model="formData.server_price"
							placeholder="请输入服务费"
							type="text"
							maxlength="30"
							show-word-limit
							clearable
						>
                            <template #append>元</template>
                        </el-input>
					</div>
				</el-form-item>
                <el-form-item label="开始展示时间" prop="show_start_time">
                    <div class="piker">
                        <el-date-picker
                            v-model="formData.show_start_time"
                            type="datetime"
                            placeholder="请选择时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="结束展示时间" prop="show_time">
                    <div class="piker">
                        <el-date-picker
                            v-model="formData.show_time"
                            type="datetime"
                            placeholder="请选择时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="是否显示" class="mt-[18px] !mb-0">
                    <div class="flex-1 flex items-center">
                        <el-switch
                            v-model="formData.is_show"
                            :active-value="1"
                            :inactive-value="0"
                        />
                        <div class="drag-move cursor-move ml-auto">
                            <icon name="el-icon-Rank" size="18" />
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <footer-btns>
			<el-button type="primary" v-perms="['user.group/saveGroup']" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
		</footer-btns>
    </div>
</template>
<script lang="ts" setup name="cooperationPosterDetail">
import type { FormInstance } from 'element-plus'
import { posterInfo, savePoster } from '@/api/cooperate/lists';

const route = useRoute()
const router = useRouter()

const formData:any = reactive({
    id: '',
    business_name: '',
    show_start_time: '',
    show_time: '',
    quota: '',
    server_price: '',
    is_show: ''
})
const formRef = shallowRef<FormInstance>()
const rules = {
    business_name: [{required: true, message: '请填写业务名称', trigger: 'blur'}],
    show_start_time: [{required: true, message: '请选择开始展示时间', trigger: 'blur'}],
    show_time: [{required: true, message: '请选择结束展示时间', trigger: 'blur'}],
    quota: [{required: true, message: '请填写放款额度', trigger: 'blur'}],
    server_price: [{required: true, message: '请填写服务费', trigger: 'blur'}],
}

const getDetails = async () => {
    const data = await posterInfo({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        formData[key] = data[key]
    })
}
route.query.id && getDetails()

const handleSave = async () => {
    await formRef.value?.validate();
    await savePoster(formData)
    router.back()
}
</script>
<style scoped lang="scss">
.piker{
    width: 360px;
	::v-deep .el-input__wrapper{
		width: 320px;
	}
}
</style>